<template>
  <div class="app-container">
    <div class="header">
      <el-row :gutter="20" class="bottom-aligned-row">
        <div class="left-column">草稿箱</div>
        <div class="right-column">
          <span v-if="unreadCount > 0">(共{{total}}封邮件,其中<span style="color: red;">未读邮件</span>{{ unreadCount }}封） </span>
          <span v-else>(共{{total}}封邮件)</span>
        </div>
      </el-row>
    </div>

    <el-button @click="logicDeleteItems() " >删除</el-button>
    <el-button @click="deleteItems() " >彻底删除</el-button>
    <el-dropdown trigger="click">
      <el-button class="el-dropdown-link">
        标记为...<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item><el-button style="color: #2c3e50" type="text" @click="starredItems()">星标邮件</el-button></el-dropdown-item>
        <el-dropdown-item><el-button style="color: #2c3e50" type="text" @click="unStarredItems()">取消星标</el-button></el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-dropdown trigger="click">
      <el-button class="el-dropdown-link">
        移动到...<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item><el-button style="color: #2c3e50" type="text" @click="inboxItems()">收件箱</el-button></el-dropdown-item>
        <el-dropdown-item><el-button style="color: #2c3e50" type="text" @click="sendItems()">已发送</el-button></el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>


  </div>
</template>
<script >

export default {
  name: 'DraftHeader',
  props:{
    logicDeleteMethod: {
      type: Function,
      required: true
    },
    deleteMethod: {
      type: Function,
      required: true
    },
    total:{
      type: Number,
      required: true
    },
    unreadCount:{
      type: Number,
      required: true
    },
    readMethod:{
      type: Function,
      required: true
    },
    unreadMethod:{
      type: Function,
      required: true
    },
    unstarMethod:{
      type: Function,
      required: true
    },
    starMethod:{
      type: Function,
      required: true
    },
    moveMethod2:{
      type: Function,
      required: true
    },
    moveMethod3:{
      type: Function,
      required: true
    }
  },
  methods: {
    logicDeleteItems() {
      this.logicDeleteMethod(); // 调用父组件传递的删除方法
    },
    deleteItems() {
      this.deleteMethod(); // 调用父组件传递的删除方法
    },
    readItems(){
      this.readMethod();
    },
    unReadItems() {
      this.unreadMethod();
    },
    starredItems(){
      this.starMethod();
    },
    unStarredItems(){
      this.unstarMethod();
    },
    inboxItems(){
      this.moveMethod2();
    },
    sendItems(){
      this.moveMethod3();
    }


  },
  watch:{
    unreadCount(newVal, oldVal) {
      console.log('Prop changed:', newVal);
      // 你可以在这里执行任何必要的更新操作
    }

  }
}

</script>
<style >
.header{
  margin-bottom: 10px;
  width: 50%;
}
.bottom-aligned-row {
  display: flex;
  align-items: flex-end; /* 垂直对齐到底部 */
}
.left-column {
  font-size: 25px; /* 设置左侧字体大小 */
  text-align: left; /* 确保文本左对齐 */
}
.right-column {
  font-size: 14px; /* 设置右侧字体大小 */
  text-align: left; /* 确保文本左对齐 */
}
</style>